<!-- 公告管理组件 -->
<template>
  <div>
    <el-card>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>公告管理</el-breadcrumb-item>
        <span class="btn">
          <!-- 新增按钮区域 -->
          <el-button type="primary" size="medium" @click="addAnnouncementList()">新增</el-button>
          <!-- 批量删除按钮 -->
          <el-button type="danger" size="medium" @click="allDeleteBtn()">批量删除</el-button>
        </span>
      </el-breadcrumb>
      <span class="spnBorder"></span>
      <div class="serachFrom">
        <!-- <p>全部（{{this.total}}条）</p> -->
        <!-- 表单查询区域 -->
        <el-form :inline="true" :model="queryInfo" class="demo-form-inline" ref="queryFromRef">
          <el-row>
            <el-col :span="6.5">
              <el-form-item label="状态" prop="state">
                <el-select v-model="queryInfo.state" placeholder="请选择状态">
                  <el-option
                    v-for="item in stateOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6.5">
              <el-form-item label="公告标题" prop="title">
                <el-input v-model="queryInfo.title" placeholder="请输入标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8.5">
              <el-form-item label="发布时间范围" prop="date">
                <el-date-picker
                  v-model="queryInfo.date"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2.5">
              <el-form-item class="itemBtns">
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="resetBtn">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        v-loading="pictLoading"
        element-loading-text="数据正在加载中..."
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column prop="title" label="公告标题" width="180" align="center"></el-table-column>
        <el-table-column prop="moduleName" label="所属模块" align="center"></el-table-column>
        <el-table-column label="公告时限" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.flag==1">{{scope.row.publishTime}} 至 永久</span>
            <span v-else>{{scope.row.publishTime}} 至 {{scope.row.publishEndTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="当前状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.state===0">草稿</span>
            <span v-else-if="scope.row.state===1">发布中</span>
            <span v-else-if="scope.row.state===2">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.state===0||scope.row.state===2?true:false"
              :type="scope.row.state===0||scope.row.state===2?'':'primary'"
              plain
              size="mini"
              @click="withdrawState(scope.row)"
            >撤回</el-button>
            <el-button
              :disabled="scope.row.state===1||scope.row.state===2?true:false"
              :type="scope.row.state===1||scope.row.state===2?'':'primary'"
              plain
              size="mini"
              @click="releaseState(scope.row)"
            >发布</el-button>
            <el-button
              :disabled="scope.row.state===0||scope.row.state===2?true:false"
              :type="scope.row.state===0||scope.row.state===2?'':'danger'"
              plain
              size="mini"
              @click="disableState(scope.row)"
            >停用</el-button>
            <!-- 鼠标移入弹出修改、删除等按钮 -->
            <el-popover placement="bottom" width="200" trigger="hover">
              <el-button type="primary" plain size="mini" @click="lookTableBtn(scope.row)">查看</el-button>
              <el-button
                type="primary"
                plain
                size="mini"
                :disabled="scope.row.state===2?true:false"
                @click="editTableBtn(scope.row)"
              >修改</el-button>
              <el-button type="danger" plain size="mini" @click="deleteTableBtn(scope.row.id)">删除</el-button>

              <el-button
                size="mini"
                slot="reference"
                class="el-icon-more"
                style="border:0; font-size: 16px;color: #2a70ed;"
              ></el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 新增和修改对话框 -->
    <el-dialog
      :title="flag===true?'新增':'修改'"
      :visible.sync="addAnnDialogVisible"
      width="60%"
      @close="resetFromData"
    >
      <!-- 新增表单区域 -->
      <el-form
        :label-position="labelPosition"
        label-width="120px"
        :model="addAnnouncemenDate"
        ref="addAnnFormRef"
        :rules="addAnnFormRules"
      >
        <el-form-item label="公告标题" prop="title" class="inputWidth">
          <el-input v-model="addAnnouncemenDate.title" placeholder="请输入公告标题"></el-input>
        </el-form-item>
        <el-form-item label="所属模块" prop="moduleName" class="inputWidth inputRight">
          <el-select
            v-model="addAnnouncemenDate.moduleName"
            @change="selectAnnouncement($event)"
            placeholder="请选择所属模块"
          >
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- :rules="[{ required: addAnnouncemenDate.flag==0?true:false, message: '请选择发布时限', trigger: 'change' }]" -->
        <el-form-item
          label="发布时限"
          :prop="addAnnouncemenDate.flag==0?'times':'publishTime'"
          class="inputWidth"
        >
          <el-date-picker
            v-model="addAnnouncemenDate.times"
            v-show="addAnnouncemenDate.flag==0"
            type="daterange"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getTimeLimitData($event)"
            :picker-options="pickerOptions"
            :disabled="addAnnouncemenDate.flag==1?true:false"
            :rules="[{ required: true, message: '请选择发布时限', trigger: 'blur' }]"
          ></el-date-picker>
          <el-date-picker
            v-model="addAnnouncemenDate.publishTime"
            v-show="addAnnouncemenDate.flag==1"
            type="date"
            value-format="yyyy-MM-dd"
            @change="setTimeLimitData($event)"
            :rules="[{ required: true, message: '请选择发布时限', trigger: 'blur' }]"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="是否永久发布" prop="flag" class="inputWidth inputRight">
          <el-radio-group v-model="addAnnouncemenDate.flag" @change="radioDataChange">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="发布内容" prop="content" style="width:97%;">
          <el-input type="textarea" v-model="addAnnouncemenDate.content" :autosize="{ minRows: 6}"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" style="width:97%;">
          <el-input type="textarea" v-model="addAnnouncemenDate.remark"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区域 -->
      <div class="dialogBot" slot="footer">
        <el-button @click="addAnnDialogVisible = false">取 消</el-button>
        <el-button @click="addDraft" :disabled="isDisable">草 稿</el-button>
        <el-button type="primary" @click="addAnnouncemenRow" :disabled="isDisable">发 布</el-button>
      </div>
    </el-dialog>
    <!-- 查看对话框 -->
    <el-dialog title="查看" :visible.sync="lookAnnDialogVisible" width="60%">
      <!-- 表单区域 -->
      <el-form :label-position="labelPosition" label-width="120px" :model="addAnnouncemenDate">
        <el-form-item label="公告标题" prop="title" class="inputWidth">
          <el-input v-model="addAnnouncemenDate.title" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属模块" prop="moduleName" class="inputWidth inputRight">
          <el-select v-model="addAnnouncemenDate.moduleName" placeholder="请选择" disabled>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时限" prop="publishTime" class="inputWidth">
          <el-date-picker
            v-model="addAnnouncemenDate.times"
            v-show="addAnnouncemenDate.flag==0"
            type="daterange"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getTimeLimitData($event)"
            :picker-options="pickerOptions"
            disabled
          ></el-date-picker>
          <el-date-picker
            v-model="addAnnouncemenDate.publishTime"
            v-show="addAnnouncemenDate.flag==1"
            type="date"
            placeholder="选择日期"
            disabled
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="是否永久发布" prop="flag" class="inputWidth inputRight">
          <el-radio-group v-model="addAnnouncemenDate.flag" @change="radioDataChange" disabled>
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="发布内容" prop="content" style="width:97%;">
          <el-input
            type="textarea"
            v-model="addAnnouncemenDate.content"
            :autosize="{ minRows: 6}"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" style="width:97%;">
          <el-input type="textarea" v-model="addAnnouncemenDate.remark" disabled></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区域 -->
      <div class="dialogBot" slot="footer">
        <el-button type="primary" @click="lookAnnDialogVisible = false">关 闭</el-button>
        <!-- <el-button @click="lookAnnDialogVisible = false">取 消</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
// console.log(0.1 + 0.2 == 0.3 )
// console.log((0.1 * 1000 + 0.2 * 1000) / 1000 == (0.3 * 1000) / 1000)
console.log(0.5 + 0.1 == 0.6)

export default {
  data() {
    return {
      // 获取用户列表的参数对象和
      queryInfo: {
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        limit: 10,
        state: '',
        title: '',
        date: '',
      },
      // 列表数据对象
      tableData: [],
      total: 0,
      // value: '1',
      // 默认 新增/修改对话框隐藏
      addAnnDialogVisible: false,
      labelPosition: 'right',
      // 新增和修改表单对象
      addAnnouncemenDate: {
        id: '',
        title: '',
        moduleName: '', // 模块名称
        moduleCode: '', // 模块编码
        flag: 0, // 是否永久发布 默认0为否
        times: '',
        publishTime: '', // 发布时限开始时间
        publishEndTime: '', // 发布时限结束时间
        content: '',
        remark: '',
        state: 1,
      },
      // 查询转态下拉菜单
      stateOptions: [],
      // 新增对话框下拉框选项
      options: [],
      // 列表数据加载时loading
      pictLoading: false,
      // 控制对话框标题显示
      flag: true,
      // 控制查看对话框的显示或隐藏
      lookAnnDialogVisible: false,
      // 批量删除是的ids数组数据
      ids: [],
      // 表单预验证
      addAnnFormRules: {
        title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
        moduleName: [{ required: true, message: '请选择所属模块', trigger: 'change' }],
        times: [{ required: true, message: '请选择发布时限', trigger: 'blur' }],
        publishTime: [{ required: true, message: '请选择发布时限', trigger: 'blur' }],
        flag: [{ required: true, message: '请选择是否永久发布', trigger: 'change' }],
        content: [{ required: true, message: '请输入发布内容', trigger: 'blur' }],
      },
      //禁用当前日期之前的日期
      pickerOptions: {
        disabledDate(time) {
          //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
          return time.getTime() < Date.now() - 8.64e7
        },
      },
      isDisable: false, // 避免表单重复提交
    }
  },
  created() {
    this.getAnnouncemenList()
    this.getStateData()
    this.getModuleData()
  },
  methods: {
    // 获取数据列表
    async getAnnouncemenList() {
      this.pictLoading = true
      let datas = {
        page: this.queryInfo.page,
        limit: this.queryInfo.limit,
        state: this.queryInfo.state,
        title: this.queryInfo.title,
        publishStarTime: this.queryInfo.date[0],
        publishEndTime: this.queryInfo.date[1],
      }
      const { data: res } = await this.$http.get('/sys/announcement/list_page', { params: datas })
      // console.log(res)
      this.pictLoading = false
      if (res.errorCode !== 200) return this.$message.error('获取数据列表失败！！')
      this.tableData = res.data.list
      this.total = res.data.totalCount
    },
    // 监听 pagesize 改变事件
    handleSizeChange(pageSize) {
      this.queryInfo.limit = pageSize
      this.getAnnouncemenList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(currentPage) {
      this.queryInfo.page = currentPage
      this.getAnnouncemenList()
    },
    // 查询状态菜单数据
    async getStateData() {
      const { data: res } = await this.$http.get('/sys/dict/getDict?code=modulestate')
      if (res.errorCode !== 200) return this.$message.error('获取状态数据失败！')
      this.stateOptions = res.data
    },
    // 撤回发布状态
    async withdrawState(row) {
      const { data: res } = await this.$http.put('/sys/announcement/updateState', { id: row.id, state: 0 })
      // console.log(res)
      if (res.errorCode !== 200) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getAnnouncemenList()
    },
    // 发布中状态
    async releaseState(row) {
      const { data: res } = await this.$http.put('/sys/announcement/updateState', { id: row.id, state: 1 })
      if (res.errorCode !== 200) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getAnnouncemenList()
    },
    // 停用发布状态
    async disableState(row) {
      const confirmResult = await this.$confirm('停用后无法对该数据进行操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.put('/sys/announcement/updateState', { id: row.id, state: 2 })
      if (res.errorCode !== 200) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getAnnouncemenList()
    },
    // 获取对话框所属模块数据
    async getModuleData() {
      const { data: res } = await this.$http.get('/sys/dict/getDict?code=module')
      if (res.errorCode !== 200) return this.$message.error('获取模块数据失败！')
      // console.log(res)
      this.options = res.data
    },
    // 监听对话框所属模块下拉菜单变化
    selectAnnouncement(id) {
      this.options.find((item) => {
        if (item.id === id) {
          this.addAnnouncemenDate.moduleName = item.name
          this.addAnnouncemenDate.moduleCode = item.code
        }
      })
    },
    // 监听对话框是否永久发布按钮变化
    radioDataChange(e) {
      console.log(e)
      this.addAnnouncemenDate.flag = e
    },
    //  监听对话框发布时限中值的变化
    getTimeLimitData(e) {
      console.log(e)
      this.addAnnouncemenDate.publishTime = e[0]
      this.addAnnouncemenDate.publishEndTime = e[1]
    },
    setTimeLimitData(e) {
      this.addAnnouncemenDate.publishTime = e
    },
    // 点击新增按钮显示对话框
    addAnnouncementList() {
      this.addAnnDialogVisible = true
      this.flag = true
      this.addAnnouncemenDate.title = ''
      this.addAnnouncemenDate.moduleName = ''
      this.addAnnouncemenDate.content = ''
      this.addAnnouncemenDate.flag = 0
      this.addAnnouncemenDate.times = ''
      this.addAnnouncemenDate.publishTime = ''
      this.addAnnouncemenDate.publishEndTime = ''
      this.addAnnouncemenDate.remark = ''
    },
    // 实现新增和修改功能
    addAnnouncemenRow() {
      // console.log(this.addAnnouncemenDate.state)
      if (this.flag) {
        // 表单预检验
        this.$refs.addAnnFormRef.validate(async (valid) => {
          // console.log(valid)
          if (!valid) return
          this.isDisable = true
          const { data: res } = await this.$http.post('/sys/announcement/save', this.addAnnouncemenDate)
          // console.log(res)
          this.isDisable = false //执行请求后就不能点击了
          if (res.errorCode !== 200) return this.$message.error('添加数据失败！')
          this.$message.success('添加数据成功！')
          this.getAnnouncemenList()
          this.addAnnDialogVisible = false
        })
      } else {
        this.$refs.addAnnFormRef.validate(async (valid) => {
          // console.log(valid)
          if (!valid) return
          this.isDisable = true
          const { data: res } = await this.$http.put('/sys/announcement/update', this.addAnnouncemenDate)
          this.isDisable = false
          if (res.errorCode !== 200) return this.$message.error('修改数据失败！')
          this.$message.success('修改数据成功！')
          this.getAnnouncemenList()
          this.addAnnDialogVisible = false
        })
      }
    },
    // 弹出修改对话框
    editTableBtn(Row) {
      this.addAnnDialogVisible = true
      this.flag = false
      console.log(Row)
      this.addAnnouncemenDate.id = Row.id
      this.addAnnouncemenDate.title = Row.title
      this.addAnnouncemenDate.moduleName = Row.moduleName
      this.addAnnouncemenDate.moduleCode = Row.moduleCode
      this.addAnnouncemenDate.content = Row.content
      this.addAnnouncemenDate.flag = Row.flag
      if (Row.flag == 0) {
        if (Row.publishTime !== null || Row.publishEndTime !== null) {
          this.addAnnouncemenDate.times = [Row.publishTime, Row.publishEndTime]
        } else {
          this.addAnnouncemenDate.times = ['', '']
        }
      } else {
        this.addAnnouncemenDate.publishTime = Row.publishTime
      }
      this.addAnnouncemenDate.remark = Row.remark
    },
    // 存为草稿功能
    addDraft() {
      // this.addAnnouncemenDate.state = 0
      let data = {
        id: this.addAnnouncemenDate.id,
        title: this.addAnnouncemenDate.title,
        moduleName: this.addAnnouncemenDate.moduleName, // 模块名称
        moduleCode: this.addAnnouncemenDate.moduleCode, // 模块编码
        flag: this.addAnnouncemenDate.flag, // 是否永久发布
        times: this.addAnnouncemenDate.times,
        publishTime: this.addAnnouncemenDate.publishTime, // 发布时限开始时间
        publishEndTime: this.addAnnouncemenDate.publishEndTime, // 发布时限结束时间
        content: this.addAnnouncemenDate.content,
        remark: this.addAnnouncemenDate.remark,
        state: 0,
      }
      if (this.flag) {
        // 表单预检验
        this.$refs.addAnnFormRef.validate(async (valid) => {
          // console.log(valid)
          if (!valid) return
          this.isDisable = true
          const { data: res } = await this.$http.post('/sys/announcement/save', data)
          // console.log(res)
          this.isDisable = false //执行请求后就不能点击了
          if (res.errorCode !== 200) return this.$message.error('添加数据失败！')
          this.$message.success('添加数据成功！')
          this.getAnnouncemenList()
          this.addAnnDialogVisible = false
        })
      } else {
        this.$refs.addAnnFormRef.validate(async (valid) => {
          // console.log(valid)
          if (!valid) return
          this.isDisable = true
          const { data: res } = await this.$http.put('/sys/announcement/update', data)
          this.isDisable = false
          if (res.errorCode !== 200) return this.$message.error('修改数据失败！')
          this.$message.success('修改数据成功！')
          this.getAnnouncemenList()
          this.addAnnDialogVisible = false
        })
      }
    },
    // 显示查看对话框
    lookTableBtn(Row) {
      console.log(Row)
      this.lookAnnDialogVisible = true
      this.addAnnouncemenDate.id = Row.id
      this.addAnnouncemenDate.title = Row.title
      this.addAnnouncemenDate.moduleName = Row.moduleName
      this.addAnnouncemenDate.content = Row.content
      this.addAnnouncemenDate.flag = Row.flag
      if (Row.publishTime !== null || Row.publishEndTime !== null) {
        this.addAnnouncemenDate.times = [Row.publishTime, Row.publishEndTime]
      } else {
        this.addAnnouncemenDate.times = ['', '']
      }
      this.addAnnouncemenDate.publishTime = Row.publishTime
      this.addAnnouncemenDate.remark = Row.remark
    },
    // 监听对话框关闭事件
    resetFromData() {
      this.$refs.addAnnFormRef.resetFields()
    },
    //  实现表格单个删除功能
    async deleteTableBtn(id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('/sys/announcement/delete', { data: { ids: id } })
      // console.log(res)
      if (res.errorCode !== 200) return this.$message.error('删除数据失败！')
      this.$message.success('删除数据成功！')
      //此时已经实现删除操作，所以total的值需要减1，Math.ceil是向上取整，保证始终大于等于1
      const totalPage = Math.ceil((this.total - 1) / this.queryInfo.limit)
      //记录当前页码、记住删除最后一条数据时当前码是最后一页
      const pagenum = this.queryInfo.page > totalPage ? totalPage : this.queryInfo.page
      //实现跳转
      this.queryInfo.page = pagenum < 1 ? 1 : pagenum
      // console.log(this.queryInfo.page)
      // 重新渲染（后面方法改为你的方法名）
      this.getAnnouncemenList()
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      // console.log(val)
      let ids = []
      val.map(function (v) {
        ids.push(v.id)
      })
      this.ids = ids
      console.log(this.ids)
    },
    // 实现批量删除功能
    async allDeleteBtn() {
      console.log(this.ids)
      if (this.ids.length == 0) return this.$message.info('请先勾选要删除的数据！')
      let params = { ids: this.ids }
      const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('/sys/announcement/delete', { data: params })
      if (res.errorCode !== 200) return this.$message.error('删除数据失败！')
      this.$message.success('删除数据成功！')
      // totalPage 表示为删除n条数据除以每页显示的条数后、得出最后一页页数
      const totalPage = Math.ceil((this.total - this.ids.length) / this.queryInfo.limit)
      const pagenum = this.queryInfo.page > totalPage ? totalPage : this.queryInfo.page
      //实现跳转
      this.queryInfo.page = pagenum < 1 ? 1 : pagenum
      this.getAnnouncemenList()
    },
    // 表单查询功能
    async onSubmit() {
      console.log(this.queryInfo.date)
      this.queryInfo.page = 1
      this.queryInfo.limit = 10
      this.getAnnouncemenList()
    },
    // 实现重置功能
    resetBtn() {
      this.$refs.queryFromRef.resetFields()
      this.onSubmit()
    },
  },
}
</script>
<style lang="less" scoped>
.el-card {
  .spnBorder {
    display: block;
    margin: 10px 0;
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
  .serachFrom {
    margin-left: 30px;
    p {
      padding: 15px 0;
    }
  }
  .el-pagination {
    float: right;
    margin: 10px 20px;
  }
}
.el-dialog {
  .dialogBot {
    text-align: right !important;
    padding-right: 3%;
  }
  .el-select {
    width: 100%;
  }
  .el-date-editor--daterange.el-input__inner {
    width: 100%;
  }
}
</style>